{% extends "layout.html" %}
{% block css %}
<link rel="stylesheet" type="text/css" href="{{url('/assets/js/plugins/select2/css/select2.min.css')}}">
<style>
.form-horizontal select.m-b{padding-top: 3px}
span.select2-container {
    z-index:10050;
}
</style>
{% endblock %}
{% block content %}
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>答辩管理 <small>答辩列表</small></h5>
                        <div class="ibox-tools"></div>
                    </div>
                    <div class="col-xs-5 col-md-5">
                        
                        <!--新增按钮-->
                        <button {{W(100)}} type="button" id="defenseAddBtn"  class="btn btn-w-m btn-primary"><i class="fa fa-plus-circle"></i> 新增答辩</button></a>
                        <a onClick="javascript:window.location.reload();"><button type="button" class="btn btn-w-m btn-info"><i class="fa fa-undo"></i> 刷新页面</button></a>
                    
                    </div>
                    <div class="col-xs-6 col-md-6">
                        <div class="input-group m-b">
                            <div class="input-group-btn">
                                <button data-toggle="dropdown" class="btn btn-white" type="button" aria-expanded="false">
                                   查询条件
                                </button>
                            </div>
                            <input placeholder="答辩题目 " type="text" class="form-control" name="" value=""  id='tablesSearch'>
                            <span class="input-group-btn"><button  id="searchButton" type="button" class="btn btn-primary">搜索</button></span>
                        </div>
                    </div>

                    <div class="ibox-content">
                        <table id="dataTables" class="table table-striped table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>编号</th>
                                    <th>时间</th>
                                    <th>题目</th>
                                    <!--th>学期</th-->
                                    <th>学生</th>
                                    <th>结果</th>
                                    <th {{W(102)}} >操作</th>
                                </tr>
                            </thead>
                            <tbody>
                               
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>编号</th>
                                    <th>时间</th>
                                    <th>题目</th>
                                    <!--th>学期</th-->
                                    <th>学生</th>
                                    <th>结果</th>
                                    <th {{W(102)}} >操作</th>
                                </tr>
                            </tfoot>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>
    
   
        
    
    
    <!--新增课程-->
    <div class="modal inmodal fade" id="defenseAdd" tabindex="-1" role="dialog"  aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span>
                        <span class="sr-only">关闭</span>
                    </button>
                    <h2 class="modal-title">新增答辩</h2>
                </div>
                <div class="modal-body">
                    <div class="ibox-content">
                        <form class="form-horizontal m-t" id="defenseForm">
                            
                            {% if student|length > 0 %}
                            <!--学生信息-->
                            <input id="student_id" name="student_id" value="{{student.id}}" class="form-control" type="hidden">
                            <input id="semester_id" name="semester_id" value="{{student.semester_id}}" class="form-control" type="hidden">
                            {% else %}
                            <div class="form-group">
                                <label class="col-sm-3 control-label">选择学期：</label>
                                <div class="col-sm-7">
                                    <select id="semesters_id" class="form-control m-b" name="semester_id">
                                        <option value="">全部</option>
                                        {% if semesters|length > 0 %}
                                            {% for semester in semesters %}
                                                <option value="{{ semester.id|e }}">{{ semester.name|e }}</option>
                                            {% endfor %}
                                        {% endif %}
                                    </select>
                                </div>
                            </div>
                            <div class="form-group" id="student-group" style="display:none;">
                                <label class="col-sm-3 control-label">选择学生：</label>
                                <div class="col-sm-7">
                                    <select id="students_id" class="form-control m-b" name="student_id">
                                    </select>
                                </div>
                            </div>
                            {% endif %}
                            
                            <div class="form-group">
                                <label class="col-sm-3 control-label">答辩题目：</label>
                                <div class="col-sm-7">
                                    <input id="name" name="name" class="form-control" type="text" aria-required="true" aria-invalid="false" class="valid">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">答辩时间：</label>
                                <div class="col-sm-7">
                                    <input readonly id="start_time" type="text" name="start_time" class="laydate-icon form-control layer-date">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">答辩结果：</label>
                                <div class="col-sm-7">
                                    <select id="result" class="form-control m-b" name="result">
                                        {% if results|length > 0 %}
                                            {% for result in results %}
                                                <option value="{{ result.id|e }}">{{ result.name|e }}</option>
                                            {% endfor %}
                                        {% endif %}
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">答辩成员：</label>
                                <div class="col-sm-7">
                                    <textarea name="member" class="form-control" rows="3"></textarea>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label class="col-sm-3 control-label">答辩备注：</label>
                                <div class="col-sm-7">
                                    <textarea name="remark" class="form-control" rows="3"></textarea>
                                    <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> [可选]</span>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <div class=" col-sm-6 col-sm-offset-3">
                                    <button class="btn btn-default" type="reset">重置</button>
                                    <button class="btn btn-primary" type="submit">提交</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>  
        
    <!--编辑-->
    <div class="modal inmodal fade" id="defenseUpdate" tabindex="-1" role="dialog"  aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span>
                        <span class="sr-only">关闭</span>
                    </button>
                    <h2 class="modal-title">编辑课题</h2>
                </div>
                <div class="modal-body">
                    <div class="ibox-content">
                        <form class="form-horizontal m-t" id="defenseFormUpdate">
                            
                            <input id="update_id" name="id" value="" class="form-control" type="hidden">
                            
                            {% if student|length > 0 %}
                            <!--学生信息-->
                            <input id="update_student_id" name="student_id" value="{{student.id}}" class="form-control" type="hidden">
                            <input id="update_semester_id" name="semester_id" value="{{student.semester_id}}" class="form-control" type="hidden">
                            
                            {% else %}
                            <div class="form-group">
                                <label class="col-sm-3 control-label">选择学期：</label>
                                <div class="col-sm-7">
                                    <input id="update_semester_id" disabled="disabled"  name="semester_id"  class="form-control" type="text">
                                </div>
                            </div>
                            <div class="form-group" id="update_student-group">
                                <label class="col-sm-3 control-label">选择学生：</label>
                                <div class="col-sm-7">
                                    <input id="update_student_id" disabled="disabled"  name="student_id" class="form-control" type="text">
                                </div>
                            </div>
                            {% endif %}
                            
                            <div class="form-group">
                                <label class="col-sm-3 control-label">课题名称：</label>
                                <div class="col-sm-7">
                                    <input id="update_name" name="name" class="form-control" type="text" aria-required="true" aria-invalid="false" class="valid">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">答辩时间：</label>
                                <div class="col-sm-7">
                                    <input readonly id="update_start_time" type="text" name="start_time" class="laydate-icon form-control layer-date">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">答辩结果：</label>
                                <div class="col-sm-7">
                                    <select id="update_result" class="form-control m-b" name="result">
                                        {% if results|length > 0 %}
                                            {% for result in results %}
                                                <option value="{{ result.id|e }}">{{ result.name|e }}</option>
                                            {% endfor %}
                                        {% endif %}
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">答辩成员：</label>
                                <div class="col-sm-7">
                                    <textarea id="update_member" name="member" class="form-control" rows="3"></textarea>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label class="col-sm-3 control-label">答辩备注：</label>
                                <div class="col-sm-7">
                                    <textarea id="update_remark" name="remark" class="form-control" rows="3"></textarea>
                                    <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> [可选]</span>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <div class=" col-sm-6 col-sm-offset-3">
                                    <button class="btn btn-default" type="reset">重置</button>
                                    <button class="btn btn-primary" type="submit">提交</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>  

</body>
{% endblock %}

{% block script %}
    <!-- Data Tables -->
    <script src="{{url('/assets/js/plugins/dataTables/jquery.dataTables.js')}}"></script>
    <script src="{{url('/assets/js/plugins/dataTables/dataTables.bootstrap.js')}}"></script>
    <script src="{{url('/assets/js/plugins/layer/layer.min.js')}}"></script>
    
    <!-- layerDate plugin javascript -->
    <script src="{{url('/assets/js/plugins/layer/laydate/laydate.js')}}"></script>
    
    <!-- jQuery Validation plugin javascript-->
    <script src="{{url('/assets/js/plugins/validate/jquery.validate.min.js')}}"></script>
    <script src="{{url('/assets/js/plugins/validate/messages_zh.min.js')}}"></script>
    
    
    <script src="{{url('/assets/js/plugins/select2/js/select2.min.js')}}"></script>
    
    
<script>
        
    $(document).ready(function () {
        
        
        // 显示学期学生
        $('#semesters_id').change(function(){
            $('#student-group').slideDown("slow");
            //获取某一个学期的学生
            var student  = getStudents(
                'students_id',
                "student/where.html",
                {"wheredata": "semester_id="+$('#semesters_id').val()}
            );
        });
        
        //日期范围限制  === 新增
        var start ={
            elem: '#start_time',
            format: 'YYYY-MM-DD',
            event: 'focus'
        };
        laydate(start);  // 开始时间
       
        
        
        // 新增课程模态框
        $('#defenseAddBtn').click(function(){
            $('#defenseAdd').modal({backdrop: 'static', keyboard: true});
        });
       
       
        dataTablesFunction();  // 默认模态框

        // 点击搜索
        $('#searchButton').click(function(){
            var Tables = dataTablesFunction();
        });
            
        // 新增课程
        var icon = "<i class='fa fa-times-circle'></i> ";
        var validate = $("#defenseForm").validate({
            debug: false, //调试模式取消submit的默认提交功能 
            rules: {
                semester_id:{required: true},
                student_id:{required: true},
                name:{
                    required: true,
                    remote:{
                        url:"{{url('/defense/unique.html')}}",
                        delay: 800,
                        type:"post",
                        data: {
                            name :'name',
                            value:function(){
                               return $('#name').val();
                            }
                        }
                    }
                },
                start_time:{required: true},
                member:{required: true}
            },
            messages: {
                semester_id:{required: icon + "请选择学期名称"},
                student_id:{required: icon + "请选择学生"},
                name: {
                    required: icon + "请输入课题名称",
                    remote: icon + "输入课题名称已存在"
                },
                start_time:{required: icon + "请选择答辩时间"},
                member:{required: icon + "请填写答辩成员"}
            },
            submitHandler: function(form){   //表单提交句柄,为一回调函数，带一个参数：form   
                var datas = $(form).serialize();
                $.ajax({
                    type: "POST",
                    url: "{{ url('/defense/adddata.html') }}",
                    data: datas,
                    dataType: "json",
                    success: function(dataJson){
                        if(dataJson.valid === 0){
                           var message = dataJson.message;
                           $.each(message,function(i,v){  // 后端验证提示
                               var error ='<span class="help-block m-b-none"><i class="fa fa-times-circle"></i> '+v+'</span>';
                               $('#'+i).after(error);
                           });
                       }else{
                           text = 'error';
                           if(dataJson.status == 800200 ){
                               text = 'success';
                               dataTablesFunction(); // 刷新表格
                           }
                           $.AngelaAutoTips({
                               msg : dataJson.message,     //显示的消息
                               type : text		   //提示类型（1、success 2、error 3、warning）
                           });
                       }
                    },
                    error:function(){
                        $.AngelaAutoTips({
                            msg : ' 很抱歉！新增失败，请核实信息是否正确', //显示的消息
                            type : 'error'		   //提示类型（1、success 2、error 3、warning）
                        });
                    }
                });
            }
        });  // 表单验证
       
        // 编辑课程
        var validate = $("#defenseFormUpdate").validate({
            debug: true, //调试模式取消submit的默认提交功能 
            rules: {
                semester_id:{required: true},
                student_id:{required: true},
                name:{
                    required: true,
                    remote:{
                        url:"{{url('/defense/unique.html')}}",
                        delay: 800,
                        type:"post",
                        data: {
                            name :'name',
                            value:function(){
                               return $('#name').val();
                            }
                        }
                    }
                },
                start_time:{required: true},
                member:{required: true}
            },
            messages: {
                semester_id:{required: icon + "请选择学期名称"},
                student_id:{required: icon + "请选择学生"},
                name: {
                    required: icon + "请输入课题名称",
                    remote: icon + "输入课题名称已存在"
                },
                start_time:{required: icon + "请选择答辩时间"},
                member:{required: icon + "请填写答辩成员"}
            },
            submitHandler: function(form){   //表单提交句柄,为一回调函数，带一个参数：form   
                var datas = $(form).serialize();
                $.ajax({
                    type: "POST",
                    url: "{{ url('/defense/update.html') }}",
                    data: datas,
                    dataType: "json",
                    success: function(dataJson){
                        if(dataJson.valid === 0){
                           var message = dataJson.message;
                           $.each(message,function(i,v){  // 后端验证提示
                               var error ='<span class="help-block m-b-none"><i class="fa fa-times-circle"></i> '+v+'</span>';
                               $('#update_'+i).after(error);
                           });
                       }else{
                           text = 'error';
                           if(dataJson.status == 800300 ){
                               text = 'success';
                               dataTablesFunction(); // 刷新表格
                               var t2 = window.setTimeout(function(){
                                    $('#defenseUpdate').modal('hide');  // 关闭模特框
                               },5000);//使用字符串执行方法 
                           }
                           $.AngelaAutoTips({
                               msg : dataJson.message,     //显示的消息
                               type : text		   //提示类型（1、success 2、error 3、warning）
                           });
                       }
                    }
                });
            }
       });  // 表单验证
    });
    
     
    // 数据表格
    var dataTablesFunction = function(){
        var dataTables = $('#dataTables').dataTable({
             serverSide: true,
             processing: false,
             searching: true,
             destroy: true, //摧毁一个已经存在的Datatables，然后创建一个新的，
             order: [[ 0, 'desc' ]],
             ajax: {
                type: "POST",
                dataType: 'json',
                url: "{{ url('/defense/getdata.html') }}",
                data: function(data){
                    var colvalue = $('#tablesSearch').val(); 
                    data.columns[1]['search']['value'] = colvalue; // 指定列进行搜索
                },
                complete: function (xhr, ts) {
                    // 提示处理
                    $('[data-toggle="tooltip"]').tooltip();
                    $('.dataTables_filter').hide();
                }
            },
            columns: [
                {"data": "id","searchable": false },
                {"data": "start_time","searchable": false },
                {"data": "name","orderable": false},
                //{"data": "semester_id","searchable": false },
                {"data": "student_id","searchable": false },
                {"data": "result","searchable": false, 
                    "render":function(data, type, full, meta){
                        if(data==3){
                            var text= '<i class="fa fa-question-circle text-warning"> 未评估</i>';
                        }else if(data==1){
                            var text= '<i class="fa fa-thumbs-up text-success"> 通&nbsp;过</i> ';
                        }else if(data==2){
                            var text= '<i class="fa fa-hand-o-right text-danger"> 不通过</i> ';
                        }
                        return text;
                    }
                },
                {"data": 'action',
                    "render": function (data, type, full, meta) {
                        //console.log(full);
                        var result = full.result;
                        if(result == 1){
                            var icon = 'fa fa-times-circle';var title = '驳回';
                        }else{
                            var icon = 'fa fa-check-circle';var title = '通过';
                        }
                        var button = '<a {{W(102)}} data-toggle="tooltip" data-placement="right"  data-id="'+data+'" data-row="'+escape(JSON.stringify(full))+'" onClick="update(this)"  title="编辑"  href="javascript:void(0);"><i class="fa fa-pencil-square-o text-navy"></i> | </a>';
                        button += '<a {{W(103)}} data-toggle="tooltip" data-placement="right"  data-id="'+data+'" data-text="'+title+'" data-result="'+result+'" onClick="cancelstart(this)" title="'+title+'"  href="javascript:void(0);"><i class="'+icon+' text-navy"></i> | </a>';
                        button += '<a {{W(101)}}  data-toggle="tooltip" data-placement="right" data-id="'+data+'" onClick="del(this)" title="删除" href="javascript:void(0);"><i class="glyphicon glyphicon-trash text-navy"></i></a>';
                        return button;
                    },"searchable": false,"orderable": false
                }
            ],
        });
        return dataTables;
    };
        
    
  



    // 更新操作
    var update =function(that){
        $('#defenseUpdate').modal({backdrop: 'static', keyboard: true});
        var data = $(that).attr('data-row');
        var row = unescape(data);
        var rowJson = jQuery.parseJSON(row); 
        
        // 设置数据
        $.each(rowJson ,function(index,value){
            if(index == 'remark' || index== 'member' ){
                $('#update_'+index).text(value);
            }else{
                $('#update_'+index).val(value); 
            }
        });
    };


     // 删除操作
    var del = function(that){
        var id = $(that).attr('data-id');
        var tr = $(that).parents("tr");
        tr.addClass('text-muted');
        layer.alert('你要进行删除ID：'+id+' 的记录吗？', {
            title:'操作提示',
            icon: 3,
            closeBtn: 1
        }, function(index){
            var delUrl = "{{ url('/defense/del/"+id+".html')|raw}}";
            $.get( delUrl , function(data){
                if(data.status){
                    tr.remove(); // 删除行
                    layer.msg( data.message , {icon: 1});
                }
            },'json');
        });

        $('.layui-layer-close').on( 'click', function () {
            tr.removeClass('text-muted');
        });
    };


    // 启用和注销操作
    var cancelstart  = function(that){
        
        var id = $(that).attr('data-id');
        var result = $(that).attr('data-result');
        var text = $(that).attr('data-text');
        var tr = $(that).parents("tr");
        tr.addClass('text-success');
        layer.alert('你要进行'+text+'ID：'+id+' 的记录吗？', {
            title:'操作提示',
            icon: 3,
            closeBtn: 1
        }, function(index){
            var resultURL = "{{ url('/defense/cancelstart/"+id+"/"+result+".html')|raw}}";
            $.get( resultURL , function(data){
                if(data.status){
                    layer.msg( data.message , {icon: 1});
                    dataTablesFunction();
                }
            },'json');
            
        });

        $('.layui-layer-close').on( 'click', function () {
            tr.removeClass('text-success');
        });
    };
    
    
    // 查看更多
    var more = function(that){
        console.log(that);
    };
    
    
    
    //下拉学期搜索未选课学生
    var getStudents = function(idName,URL,dataOject){
        $("#"+idName).select2({
            cache: true,
            dropdownParent: $("#defenseAdd"),
            ajax: {
                type: "POST",
                url: "{{url('"+URL+"')|raw}}",
                dataType: 'json',
                delay: 800,
                initSelection: function(element, callback) { // 初始化时设置默认值，自动勾选此处设置的option  
                    //callback(data);  
                },  
                data: function (params) {
                    var query = {
                        search: params.term,
                        page: params.page || 1
                    }
                    return {
                       data:dataOject,
                       query:query
                    };
                },
                processResults: function (outData, params) {
                    var reData = [];
                    if(outData.length > 0){
                        $.each(outData, function(index, value){
                            console.log(value.username);
                            var obj = {
                                id :  value.id,
                                text : '['+value.number+'] '+value.username
                            };
                            reData.push(obj);
                        });
                        console.log(reData);
                    }
                    return {
                        results: reData,
                        pagination: {
                            more: true
                        }
                    };
                }
            }
        });
        return true;
    };
  
        
</script>
{% endblock %}